<template>
  <section>
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item  :name="order.id" v-for="order in orderList" :key="order.id">
        <template slot="title">
          {{order.id}}—{{order.userName}}—{{order.title}}
          <span v-if="order.state === 1" style="color: green;font-weight: bold">已支付</span>
          <span v-if="order.state === 0" style="color: red;font-weight: bold">待支付</span>
        </template>
        <template slot-scope="scope">
          <el-table :data="order.orderItems">
            <el-table-column type="index" label="序号"/>
            <el-table-column label="规格" prop="title"  width="180"></el-table-column>
            <el-table-column label="单价" prop="price"></el-table-column>
            <el-table-column label="编码" prop="sn" width="150"></el-table-column>
            <el-table-column label="数量" prop="num"></el-table-column>
            <el-table-column label="价格" prop="totalPrice"></el-table-column>
          </el-table>
          <el-row style="border:0px solid red;margin-top: 10px" type="flex" justify="end">
            <el-col :span="4">
              <el-button size="mini" @click="btnPay(order)" v-if="order.state === 0" type="primary">收款</el-button>
              <el-button size="mini" @click="btnOrder(order)">查看订单</el-button>
            </el-col>
          </el-row>
        </template>
      </el-collapse-item>
      <el-pagination v-show="totalPage>0" style="margin-top:10px;" background layout="prev, pager, next" :page-count="totalPage" @current-change="goPage">
      </el-pagination>
    </el-collapse>
    <el-dialog title="支付确定页" :visible.sync="showPayDetail">
      <Showpay :orders="checkOrders" :pay="currPay" v-on:cancel="cancelShowPay"></Showpay>
    </el-dialog>
    <el-dialog title="订单详情" :visible.sync="showOrderDialog">
      <order-detail :order="currPay" v-on:updateSale="updateSale" v-on:payOrder="btnPay"></order-detail>
    </el-dialog>
  </section>
</template>

<script>
  import  orderDetail from './orderDetail'
  import errHandler from '@/assets/errHandler'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Showpay from "./showPay";
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "allOrder",
    components: {Showpay,orderDetail},
    data() {
      return {
        activeNames:null,
        orderList:[],
        checkOrders:[],
        isIndeterminate: false,
        showPayDetail:false,
        currPay:{},
        orderOutOfPay:null,
        totalPage:0,
        loading: false,
        showOrderDialog:false
        // balanceMoney:null
      }
    },
    created(){
      //加载所有订单
      this.getOrderList()
      //加载部门下所有账户
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department'])
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      updateSale(e){
        this.updateOrderSale(e)
      },
      updateOrderSale(data){
        this.fetch({name:"updateOrderSale",data})
          .then(res=>{
            console.log('更新完毕---',res)
            this.getOrderList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      cancelShowPay(){
        this.showPayDetail = false
        this.getOrderList()
      },
      goPage(val){
        this.getOrderList(val-1)
        this.loading = true
      },
      getOrderList(pageNo){
        this.fetch({name:"getOrderList",data:{page:pageNo? pageNo:0,departmentId:this.department.id}})
          .then(res=>{
            console.log(res.content)
            this.orderList = res.content
            this.totalPage = res.totalPages
            this.loading = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      btnPay(row){//单个订单支付
        console.log(row)
        // this.loading = true
        //先判断是否有payNo
        if(row.data && row.data.payNo){
          //用payNo直接去topay
          console.log('有payNo了————————————')
          // this.goToPay(row.data.payNo)
        }else {
          this.checkOrders =[]
          this.checkOrders.push(row)//用于显示表格
          if(row.balanceMoney === undefined){
            Vue.set(row,'balanceMoney',0)
          }else {
            row.balanceMoney = 0
          }
          this.currPay = row//用于显示支付方式
          console.log(this.currPay)
          this.showPayDetail = true
          this.loading = false
        }
      },
      btnOrder(row){
        console.log(row)
        //已支付订单，查看详情
        this.currPay=row
        this.showOrderDialog=true
      },
      btnCancel(row){//取消订单
        console.log(row)
        this.$confirm('是否确定删除该订单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {//做删除事件
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      btnUnitPay(){//合并订单支付————————————————————————————————————————————————————————————————————————————————————————————————————————————
        console.log(this.checkOrders)
        if(this.checkOrders.length <= 0){
          this.$message({type:'error',message:'请至少选择一个订单'})
        }else {
          console.log(this.currPay)
          this.currPay = {
            id:[],
            balanceMoney:0,
            userNames:[],
            subject:'',
            payPrice:0
          }
          this.checkOrders.forEach(c =>{
            //组装一个当前支付，tradeNo（数组）
            this.currPay.payPrice += c.payPrice
            this.currPay.id.push(c.id)
            this.currPay.userNames.push(c.userName)
            this.currPay.subject = '【合并订单】-'
          })
          this.currPay.subject +=this.currPay.userNames
          console.log(this.currPay)
          this.showPayDetail = true
        }
      },
      unitPay(){
        //'subject','tradeNo','payTypeCode']//detail,data,balanceMoney,authCode
        console.log(this.checkOrders)
        let data={
          subject:'',
          tradeNo:'',
          payTypeCode:this.selPayType
        }
      },
      goToPay(payNo){
        this.fetch({name:"toPay",data:{payNo}})
          .then(res=>{
            if(res.data.state === 4){
              this.loading = false
              this.$message({type:'success',message:'支付成功！'})
              this.$emit('cancel')
              this.showPayDetail = false
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }

  }
</script>

<style scoped>

</style>
